<template>
    <div class="menuC">
        <el-button type="primary" @click="addData">
            <i class="el-icon-plus"></i>新增
        </el-button>
        <el-button @click="delMenuDataSearch()" v-if="isExpend">
            批量删除
        </el-button>
        <div class="tbBox">
            已选择{{ num }}项,
            <a @click="toggleSelection()">清空</a>
        </div>

        <!-- table -->
        <el-table :data="tableData" style="width: 100%" stripe border row-key="id" ref="multipleTable"
            @selection-change="handleSelectionChange"
            :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
            <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column v-for="(item, index) in headerData" :key="index" :prop="item.prop" :width="item.width"
                :label="item.label">
                <!-- <div v-if="item.menu">
                    {{item.menuType}}
                    <div v-if="item.menuType==2">按钮/权限</div>
                    <div v-else>菜单</div>
                </div> -->
            </el-table-column>
            <el-table-column fixed="right" label="操作" align="center" width="200">
                <template slot-scope="scope">
                    <a class="editTxt" @click="editMenuDataSearch(scope)">编辑</a>
                    <el-dropdown trigger="click">
                        <a>更多<i class="el-icon-arrow-down"></i></a>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item>
                                <span @click="lookMenuDataSearch(scope)">详情</span>
                            </el-dropdown-item>
                            <el-dropdown-item><span @click="addChild(scope)">添加下级</span></el-dropdown-item>
                            <el-dropdown-item>
                                <el-popconfirm title="确定删除?" @onConfirm="delMenuDataSearch(scope)">
                                    <span slot="reference">删除</span>
                                </el-popconfirm>
                            </el-dropdown-item>
                            <!-- <el-dropdown-item>解冻</el-dropdown-item> -->
                        </el-dropdown-menu>
                    </el-dropdown>
                </template>

            </el-table-column>

        </el-table>

        <menuDraw ref="menuDraw" :drawerTitle="drawerTitle" :tableData="tableData"
            @menuTableDataSearch="menuTableDataSearch">


        </menuDraw>
    </div>
</template>
<script>
import systemComponent from "@/components/part-wwx/systemComponent"
import { mesTableData, delMenuData } from "@/api/api-wwx/sysMenu"
import menuDraw from "@/components/part-wwx/menuDraw"
export default {

    components: {
        systemComponent,
        menuDraw
    },
    data() {
        return {
            isExpend: false,
            currentpage: 1,
            pagesize: 5,
            total: 0,
            headerData: [
                {
                    prop: "name",
                    label: "菜单名称",


                },
                {
                    prop: "menuType",
                    label: "菜单类型",
                    menu: true,


                },

                {
                    prop: "component",
                    label: "组件",


                },
                {
                    prop: "url",
                    label: "路径",

                },

            ],
            tableData: [],
            drawer: false,
            drawerTitle: '',
            num: '',
            idString: ''

        }
    },
    methods: {
        toggleSelection() {
            this.$refs.multipleTable.clearSelection();
        },
        // 选中数量改变
        handleSelectionChange(val) {
            this.num = val.length
            console.log(val);
            if (val.length) {
                this.isExpend = true
            } else {
                this.isExpend = false
            }

            let list = []
            for (let i of val) {
                list.push(i.id)
            }
            console.log(list);
            this.idString = list.join(',')
            console.log(this.idString);
        },
        // 获取表格数据
        menuTableDataSearch() {
            console.log(1234);
            let _self = this
            _self.tableData = []
            mesTableData().then(res => {
                console.log(res)
                if (res.code == 0) {
                    let table = res.result
                    console.log(table);
                    for (let item of table) {
                        _self.changeType(item)
                    }
                    console.log(table);
                    _self.tableData = table
                    console.log(_self.tableData);

                }
            })
        },
        // 添加下级
        addChild(scope) {
            let _self = this;
            _self.drawerTitle = '添加子菜单'
            _self.$refs['menuDraw'].draweropen(scope)
            _self.$refs['menuDraw'].openDrawDisable()
        },
        // 查
        lookMenuDataSearch(scope) {
            // this.drawer=true
            let _self = this;
            _self.drawerTitle = '详情'
            _self.$refs['menuDraw'].draweropen()
            _self.$refs['menuDraw'].beDrawDisable()

        },
        // 增
        addData() {
            // this.drawer=true
            let _self = this;
            _self.drawerTitle = '新增'
            _self.$refs['menuDraw'].draweropen()
            _self.$refs['menuDraw'].openDrawDisable()
        },
        // 删
        delMenuDataSearch(scope) {
            let _self = this
            if (!scope) {
                let data = {
                    id: this.idString
                }
                delMenuData(data).then(res => {
                    console.log(res);
                    if (res.code == 200) {
                        _self.menuTableDataSearch()
                    }
                })

            } else {
                let data = {
                    id: scope.row.id
                }
                delMenuData(data).then(res => {
                    console.log(res);
                    if (res.code == 200) {
                        _self.menuTableDataSearch()
                    }
                })
            }


        },
        // 改
        editMenuDataSearch(scope) {
            console.log(1515);
            let _self = this;
            _self.drawerTitle = '编辑'
            _self.$refs['menuDraw'].draweropen(scope)
            _self.$refs['menuDraw'].openDrawDisable()


            console.log(scope);

            let data = {
                id: scope.row.id
            }
            // editMenuDataSearch(data).then(res=>{
            //     console.log(res);
            //     if(res.code==200){
            //         _self.menuTableDataSearch()
            //     }
            // })

        },


        // 递归
        changeType(item) {
            if (item.menuType == 1 || item.menuType == 0) {
                item.menuType = '菜单'

            } else {
                item.menuType = '按钮/权限'
            }
            if (item.children) {
                for (let itemChildren of item.children) {
                    this.changeType(itemChildren)
                }
            }
        }

    },
    mounted() {
        this.menuTableDataSearch()
        this.drawerTitle = '新增'
    }
}
</script>
<style>
.menuC .editTxt {
    border-right: 2px solid rgb(206, 202, 202);
    padding-right: 20px;
    line-height: 14px;
}

.menuC a {
    margin-left: 20px;
}

.right {
    float: right
}

.clear {
    clear: both
}

.menuC .el-drawer__body {
    overflow: auto;
    /* 滚动条隐藏 */

    /* overflow-x: auto; */
}

.menuC .el-drawer__container ::-webkit-scrollbar {
    display: none;
}
</style>